import { Tabs } from '@geist-ui/react';
import Account from './account';
import Mobile from './mobile';
import Logo from './logo';

export default function Form() {
	return <>
		<div className="formcontainer">
			<div className="head">
				<Logo />
				<span className="title">{''}</span>
			</div>
			<Tabs initialValue='1' >
				<Tabs.Item label={<span className='tabtitle'>用户名密码登录</span>} value='1'>
					<Account />
				</Tabs.Item>
				{/* <Tabs.Item label={<span className='tabtitle'>短信验证码登录</span>} value='2'>
					<Mobile />
				</Tabs.Item> */}
			</Tabs>
		</div>
		<style jsx>{`
.tabtitle{
	color: var(--color-info);
}
.tabtitle:hover {
	color:var(--color-primary);
}
.formcontainer{
	background-color: #fffffffc;
	box-shadow: 0 2px 12px 0 var(--color-primary);
	border-radius: 4px;
	transition: height 0.2s linear;
	padding: 2rem 4rem;
}
.head {
	color: #666;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.title{
	font-size: 1.5rem;
	vertical-align: middle;
}
`}</style>
	</>;
}
